<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Opacity</title>
    <meta name="description" content="Opacity - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene stats>
      <a-assets>
        <img id="transparent-image" src="trefoil.png">
      </a-assets>

      <a-entity position="0 0 4">
        <a-camera></a-camera>
      </a-entity>

      <a-entity position="-3.5 1 0" rotation="0 45 0" geometry="primitive: box"
                material="color: red; opacity: 0.25">
        <a-entity rotation="0 45 0" scale="0.5 0.5 0.5"
                  geometry="primitive: box" material="color: red"></a-entity>
      </a-entity>

      <a-entity position="0 1 0" rotation="0 45 0" geometry="primitive: box"
                material="color: green"></a-entity>

      <a-entity position="3.5 1 0" rotation="0 45 0" geometry="primitive: box"
                material="color: blue; src: #transparent-image; opacity: 0.5">
        <a-entity rotation="0 45 0" scale="0.5 0.5 0.5"
                  geometry="primitive: box" material="color: blue"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
